<!DOCTYPE html>
<html>
<head>
    <title>Job Detail</title>
    <link rel="stylesheet" th:href="@{/css/sidebar.css}" />
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex; /* 使用 flex 布局 */
        }

        #content-container {
            flex: 1;
            margin-left: 20px;
        }

        #searchButton {
            padding: 5px 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        #userTable {
            width: 100%;
            border-collapse: collapse;
        }

        #userTable th, #userTable td {
            padding: 8px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        #userTable th {
            background-color: #4CAF50;
            color: white;
        }

        #prevButton, #nextButton {
            padding: 5px 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        #prevButton[disabled], #nextButton[disabled] {
            background-color: #ccc;
            cursor: not-allowed;
        }

        button {
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-bottom: 10px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div th:replace="sidebar.html :: sidebar"></div>
<div id="content-container">
    <button type="button" onclick="goBack()" style="margin-bottom: 20px">Go back</button>
    <div id="jobInfo"></div>
</div>
<script>
    var jobId = ''

    function getJobIdFromURL() {
        var urlParams = new URLSearchParams(window.location.search);
        this.jobId = urlParams.get('id')
    }

    function queryJobInfo() {
        fetch('/job/' + jobId, {
            method: 'GET'
        })
            .then(function(response) {
                if (response.ok) {
                    return response.json();
                } else {
                    throw new Error('Request failed with status: ' + response.status);
                }
            })
            .then(function(data) {
                if (data.code === 200) {
                    jobInfo = data.data
                    var jobInfoDiv = document.getElementById('jobInfo')
                    var jobNameH = document.createElement('h1')
                    jobNameH.textContent = '任务名:' + jobInfo.jobName

                    var jobDescriptionH = document.createElement('h4')
                    jobDescriptionH.textContent = '任务描述:' + jobInfo.description

                    var executeClassPathH = document.createElement('h4')
                    executeClassPathH.textContent = '执行类路径:' + jobInfo.executeClassPath

                    var cronH = document.createElement('h4')
                    cronH.textContent = 'cron:' + jobInfo.cron

                    var executeStrategyH = document.createElement('h4')
                    executeStrategyH.textContent = '执行策略:' + jobInfo.executeStrategy

                    jobInfoDiv.appendChild(jobNameH)
                    jobInfoDiv.appendChild(jobDescriptionH)
                    jobInfoDiv.appendChild(executeClassPathH)
                    jobInfoDiv.appendChild(cronH)
                    jobInfoDiv.appendChild(executeStrategyH)
                } else {
                    console.error(data.msg);
                }
            })
            .catch(function(error) {
                console.error(error);
            });
    }

    function goBack() {
        window.location.href = "/index";
    }

    getJobIdFromURL()
    queryJobInfo()
</script>
</body>
</html>